/* 
@font-face{
  font-family: "icons-turn-arrow";
  src: url("../fonts/icons/turn-arrow.eot") format("embedded-opentype"), 
  url("../fonts/icons/turn-arrow.woff") format("woff"), 
  url("../fonts/icons/turn-arrow.ttf") format("truetype"), 
  url("../fonts/icons/turn-arrow.svg") format("svg")
  ;
}
 */
@font-face {
  font-family: "icons-turn-arrow";
  src: url("../fonts/icons/turn-arrow.eot") format("embedded-opentype"), url("../fonts/icons/turn-arrow.woff") format("woff"), url("../fonts/icons/turn-arrow.ttf") format("truetype"), url("../fonts/icons/turn-arrow.svg") format("svg");
}

html, body {
  width: 100%;
  height: 100%;

  background-color: #222;
}

.app {
  width: 100%;
  height: 100%;
}

/* stage -- start */
.stage{
  position: relative;
  width: 100%;
  height: 680px;
}
/* stage -- end */

/* image -- start */
.image-sec{
  position: relative;

  width: 100%;
  height: 100%;
  overflow: hidden;

  background-color: #ddd; 
  
  perspective: 1800px;

  /* @at-root 将下放的样式生成到根中，即与 .img-figure与.image-sec会处于同级*/
  @at-root{
    .img-figure{
      position: absolute;

      width: 320px;
      height: 360px;
      margin: 0px;
      padding: 40px;

      background-color: #fff;

      box-sizing: border-box;
      
      cursor: pointer;

      transform-style: preserve-3d;
      transform-origin: 0 50% 0;
      transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;

      &.is-inverse {
        transform: translate(320px) rotateY(180deg);
      }

    }

    figcaption {
      text-align: center;
     
      .img-title{
        margin: 20px 0 0 0;
        color: #a7a0a2;
        font-size: 16px;
      }

      .img-back {
          position: absolute;
          top: 0;
          left: 0;

          width: 100%;
          height: 100%;
          padding: 50px 40px;
          overflow: auto;

          color: #a7a0a2;
          font-size: 22px;
          line-height: 1.25;
          text-align: left;

          background-color: #fff;

          box-sizing: border-box;
          transform: rotateY(180deg) translateZ(1px);
          backface-visibility: hidden;

          p {
            margin: 0;
          }
        }

    }
   
  }
  
}

/* iamge -- end */


/* controller -- start */
.controller-nav{
  position: absolute;
  left: 0px;
  bottom: 30px;
  z-index: 101;

  width: 100%;

  text-align: center;

  @at-root {
    .controller-unit {
      display: inline-block;
      margin: 0 5px;
      width: 30px;
      height: 30px;

      text-align: center;
      vertical-align: middle;

      cursor: pointer;
      background-color: #aaa;
      border-radius: 50%;

      transform: scale(.5);

      &.is-center {
        background-color: #888;
        transform: scale(1);

        &::after {
          color: #fff;
          font-family: "icons-turn-arrow";
          line-height: 30px;
          content: "\e600";
        }
        
        &.is-inverse {
          background-color: #555;

          transform: rotateY(180deg);
        }
      }

    }
  }
}
/* controller -- end */





